<template>
  <div class="home">
    <!-- swipe -->
    <swipe :lunbolist="lunbolist" :autoplay="3000"></swipe>
    <!-- 九宫格 -->
    <van-grid :column-num="3">
      <van-grid-item v-for="grid in grids" :key="grid.id" :icon="grid.src" :text="grid.title" :to="grid.to"/>
    </van-grid>
  </div>
</template>
<script>
import swipe from "../../components/swipe"
export default {
  components:{
    swipe
  },
  data () {
    return {
      lunbolist : [],
      grids: []
    }
  },
  created () {
    this.getLunbo()
    this.getGrid()
  },
  methods:{
    async getLunbo () {
      const res = await this.$http.getLunbo()
      this.lunbolist = res.data.message
    },
    async getGrid () {
      const res = await this.$http.getGrid()
      this.grids = res.data.message
      console.log(res)
    }
  }
}
</script>
<style lang="scss" >

.home{
  .my-swipe{
    height: 200px;
    // background-color: red;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .van-grid-item__icon{
      font-size: 40px;
    }
}
</style>
